﻿@{
    ViewData["Title"] = "Index";
}
@section Styles {
    <partial name="_JqGridStylesPartial" />
    <partial name="_LayuiStylesPartial" />
}

<div class="row">
    <div class="col-md-12">
        <button type="button" id="create-user">添加用户</button>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
</div>

@section Scripts {
    <partial name="_JqGridScriptsPartial" />
    <partial name="_LayuiScriptsPartial" />
    
    <script>
        layui.use(['layer'],
            function() {
                var layer = layui.layer;

                $('#create-user').click(function() {
                    layer.open({
                        type: 2, 
                        content: '@Url.Action("Create")', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        area: ['500px', '420px'],
                        maxmin: true
                    }); 
                });
            });
    </script>

    <script>
        var grid = $("#jqGrid");

        $(document).ready(function () {

            $.jgrid.defaults.responsive = true;
            $.jgrid.defaults.styleUI = 'Bootstrap';
            $.jgrid.defaults.whdth = 847;

            grid.jqGrid({
                url: '/Manage/Users/UserList',
                datatype: 'json',
                mtype: "GET",
                colModel: [
                    { label: 'Id', name: 'id', index: 'id', sorttype: 'text', hidden: true, key: true },
                    { label: '用户名', name: 'userName', index: 'userName', sorttype: 'text' },
                    {
                        label: '性别',
                        name: 'sex',
                        index: 'sex',
                        sorttype: 'number',
                        //cellvalue - 当前cell的值
                        //options - 该cell的options设置，包括{rowId, colModel,pos,gid}
                        //rowObject - 当前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}
                        formatter: function (cellvalue, options, rowObject) {
                            return cellvalue == null ? '未知' : cellvalue == 1 ? '男' : '女';
                        },
                        //stype: "select",
                        //searchoptions: { value: "1:男;2:女" }
                    },
                    { label: 'E-mail', name: 'email', index: 'email', sorttype: 'text' },
                    {
                        label: '已验证E-mail',
                        name: 'emailConfirmed',
                        index: 'emailConfirmed',
                        sorttype: 'text',
                        formatter: 'checkbox'
                    },
                    { label: '手机号', name: 'phoneNumber', index: 'phoneNumber', sorttype: 'text' },
                    {
                        label: '已验证手机号',
                        name: 'phoneNumberConfirmed',
                        index: 'phoneNumberConfirmed',
                        sorttype: 'text',
                        formatter: 'checkbox'
                    },
                    {
                        label: '已启用',
                        name: 'isEnable',
                        index: 'isEnable',
                        sorttype: 'text',
                        align: "center",
                        formatter: 'checkbox'
                    },
                    { label: '创建人', name: 'creationUserId', index: 'creationUserId', sorttype: 'text', align: "center" },
                    { label: '创建时间', name: 'creationTime', index: 'creationTime', sorttype: 'date', align: "center" },
                    {
                        label: '上次修改人',
                        name: 'lastModificationUserId',
                        index: 'lastModificationUserId',
                        sorttype: 'text',
                        align: "center"
                    },
                    {
                        label: '上次修改时间',
                        name: 'lastModificationTime',
                        index: 'lastModificationTime',
                        sorttype: 'date',
                        align: "center"
                    },
                    { label: '序号', name: 'orderNumber', index: 'orderNumber', sorttype: 'number' }
                ],
                height: 200,
                altRows: true,
                width: 847,
                multiSort: true,
                //loadonce: true,
                sortname: 'sampleColumn',
                multiselect: true,
                //menubar: true,
                viewrecords: true,
                //colMenu: true,
                rownumbers: true,
                sortable: true,
                grouping: true,
                //page: 1,
                rowNum: 10,
                caption: "用户列表",
                pager: "#jqGridPager"
            });
            grid.navGrid('#jqGridPager',
                {
                    search: true, // show search button on the toolbar
                    add: false,
                    edit: false,
                    del: false,
                    refresh: true
                },
                {}, // edit options
                {}, // add options
                {}, // delete options
                { multipleSearch: true, multipleGroup: true, showQuery: true } // search options - define multiple search
            );
        });
    </script>
}

